<script setup lang="ts">
import { ref } from 'vue'
import {
    Minus,
    FullScreen,
    Close,
    CopyDocument
} from '@element-plus/icons-vue'

const props = defineProps({
    appName: {
        type: String,
        default: 'Fish-Ads-App'
    },
    closeType: {
        type: String,
        default: ''
    },
    closeIcon: {
        type: Object,
        default: Close
    },
    borderRadius: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['quit'])

const handleQuit = () => {
    emit('quit')
}

defineExpose({
    handleQuit
})

const isFullScreen = ref(false)

const handleMinimize = () => {
    window.ipcRenderer.send('minimize')
}

const handleFullScreen = () => {
    isFullScreen.value = !isFullScreen.value
    window.ipcRenderer.send('full-screen', isFullScreen.value)
}
</script>

<template>
    <el-row class="top drag" justify="space-between" :style="{
        'border-top-left-radius': props.borderRadius ? '8px' : '0px',
        'border-top-right-radius': props.borderRadius ? '8px' : '0px'
    }">
        <div class="logo">
            <img src="../../assets/favicon.png" alt="logo">
            <span>{{ props.appName }}</span>
        </div>
        <el-button-group class="no-drag">
            <el-button text :icon="Minus" @click="handleMinimize" />
            <el-button text :icon="isFullScreen ? CopyDocument : FullScreen" @click="handleFullScreen" />
            <el-button :class="closeType" text :icon="props.closeIcon" @click="handleQuit" />
        </el-button-group>
    </el-row>
</template>

<style lang="scss" scoped>
.top {
    padding: 3px;
    background-color: #dde3e9;

    user-select: none;

    .logo {
        display: flex;
        align-items: center;

        img {
            width: 24px;
            height: 24px;
            margin-left: 10px;
            margin-right: 5px;
        }

        span {
            font-size: 14px;
        }
    }

    :deep(.el-button-group) {
        .el-button.danger.is-text:not(.is-disabled):hover {
            background-color: #ed4c4c;
            color: #ffffff;
        }

        .el-button.primary.is-text:not(.is-disabled):hover {
            background-color: #409eff;
            color: #ffffff;
        }
    }
}
</style>